<template>
	<view class="makbox">
		<view class="matit">预约信息</view>
		<view class="mainfo">
			<view class="naname">
				<view class="phone">手机号</view>
				<input type="text" placeholder="-" v-model="phone" placeholder-style="color:#000" />
			</view>
			<view class="naname">
				<view class="name">姓名</view>
				<input type="text" placeholder="-" v-model="name" placeholder-style="color:#000" />
			</view>
			<view class="naname1">
				<view class="six">性别</view>
				<view class="sixbox" @click="show = true">
					<view class=" ">{{sex}}</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<u-picker :show="show" :columns="columns" keyName="label" :closeOnClickOverlay="show" @close="close" @confirm="confirm"
				@cancel="cancel"></u-picker>
		</view>
		<view class="maknav">
			<view class="navit">
				<up-icon name="map-fill" color="#10c696" size="18px"></up-icon>
				<view class="">
					<view class="">{{places_name}}</view>
					<view style="font-size: 13px;color: #999999; ">{{places_address}}</view>
				</view>
			</view>
			<view class="maktiem">
				<view class="tiemtit">
					<image class="makpic" :src="places_image" mode=""></image>
					<view class="">{{places_name}}</view>
				</view>
				<view class="">预约场地:{{year}}-{{date}}</view>
				<view class="libox">
					<view class="titli" v-for="(item,index) in arr" :key="index">
						<view class="titicon">
							<up-icon name="checkbox-mark" color="#10c696" size="18px"></up-icon>
							{{item}}
						</view>
						<view class="">￥{{prc}}</view>
					</view>
				</view>
			</view>
			<view class="makvip" v-if="level == 0">
				<view class="vipletf">
					<view class="">会员折扣</view>
					<view class="letfte">升级会员享折扣价</view>
				</view>
				<view class="upvip" @click="gotovip">升级会员</view>
			</view>
			<view class="favou" @click="changeyhq">
				<view style="font-size: 15px;">优惠券</view>
				<view class="fapric">
					-￥{{pirc}}<up-icon name="arrow-right" size="15px"></up-icon>
				</view>
			</view>
			<view class="piecmak">合计:￥{{allprice-pirc}}</view>
		</view>
		<view class="relief">
			<view class="rebxo" @click="chanrel">
				<image v-if="bol" class="relimg" src="../../static/iamges/Group 179.png" mode=""></image>
			</view>
			<view class="relte">本人已经阅读并接受<text style="color: #10c696;" @click="gotomz">《辰源运动订场条款》</text></view>
		</view>
		<view class="makadd">
			<view class="addletf">
				<text style="font-size: 14px;color: #000;">合计:</text>
				<text style="font-size: 12px;color: #10c696;">￥</text>
				{{allprice-pirc}}
			</view>
			<view class="butto" @click="gototijiao">提交订单</view>
		</view>
		<up-popup :show="show1" @close="close1" round="20rpx">
			<view class="popu">
				<view style="text-align: center;" v-if="coupon.length <= 0" class="intext">--暂无优惠券--</view>
				<view class="poli" v-for="(item,index) in coupon" :key="index">
					<view class="">
						<view class="potit">包场{{item.money}}元折扣券</view>
						<view class="potiem">有效期至{{item.dead_time_text}}</view>
						<view class="buttbox">
							<view class="boxleft" @click="shiyong(item)">立即使用</view>
							<view class="boxri" @click="show2=true">查看详情</view>
						</view>
					</view>
					<image class="popimage" src="/static/logo.png" mode=""></image>
				</view>
			</view>
		</up-popup>
		<up-popup :show="show2" mode="center" @close="close2" round="20rpx">
			<view class="pobox">
				<view class="boxtit">包场30元折扣券</view>
				<view class="">优惠券试用规则</view>
				<view class="">
					1.凭本优惠券预约场地可享受30元减免，无门槛使用，本卷优惠金额不可叠加享受。<br />2.本优惠券仅限使用一次。<br />3优惠券不可与平台其他优惠活动或其他优惠同享，不可兑换现金，不找零。<br />4.本优惠券不可转赠、贩卖、截图、伪造、变造无效。
				</view>
				<view class="guanbi" @click="show2=false">关闭</view>
			</view>
		</up-popup>
		<up-popup :show="bol1" @close="gunb">
			<view class="zhifufs">
				<view class="zhifu" @click="yezf">余额支付</view>
				<view class="zhifu" @click="wxzf">微信支付</view>
				<view style="height: 10rpx;background-color: #dedede;"></view>
				<view class="qxzhifu" @click="bol1=false">取消</view>
			</view>
		</up-popup>
		<up-popup :show="bol2" @close="close3" mode="center" round="40rpx">
			<view class="pircpo">
				<view class="poptit">确认支付</view>
				<view class="pirctit">支付金额</view>
				<view class="pircetit">￥{{allprice-pirc}}</view>
				<view class="myprice">账户余额：{{jf}}</view>
				<view class="xuanz">
					<view class="qixiao" @click="closeab">取消</view>
					<view class="zhifu11" @click="payment">支付</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import request from '../../utils/request';
	onLoad((options) => {
		console.log(options)
		arr.value = options.changg.split(",");
		console.log(arr.value)
		const userinfo = uni.getStorageSync('userinfo')
		token.value = uni.getStorageSync('token')
		type1.value = uni.getStorageSync('type1')
		type2.value = options.type2
		places_id.value = uni.getStorageSync('places_id')
		price_id.value = uni.getStorageSync('price_id')
		end_time.value = uni.getStorageSync('end_time')
		start_time.value = uni.getStorageSync('start_time')
		stetiem.value = uni.getStorageSync('stetiem')
		name.value = userinfo.realname,
			phone.value = userinfo.mobile;
			level.value = userinfo.level;
		jf.value = userinfo.hasmoney
		places_name.value = decodeURIComponent(options.places_name)
		places_address.value = decodeURIComponent(options.places_address)
		places_image.value = decodeURIComponent(options.places_image)
		times.value = decodeURIComponent(options.times)
		prc.value = decodeURIComponent(options.price)
		allprice.value = decodeURIComponent(options.allprice)
		year.value = decodeURIComponent(options.year)
		date.value = decodeURIComponent(options.date)
	})
	let date = ref('')
	let year = ref('')
	let allprice = ref(0)
	let prc = ref()
	let arr = ref()
	let times = ref('')
	let jf = ref('')
	let type1 = ref()
	let type2 = ref()
	let places_id = ref()
	let price_id = ref()
	let end_time = ref()
	let start_time = ref()
	let coupon_id = ref('')
	let token = ref()
	let name = ref('')
	let phone = ref('')
	let level = ref('')
	let sex = ref('保密')
	let six = ref(0)
	let show = ref(false);
	let show2 = ref(false)
	let stetiem = ref('')
	let columns = ref([
		[{
			label: '男',
			id: 1
		},
		{
			label: '女',
			id: 2
		},
		{
			label: '保密',
			id: 0
		}
	]]);
	let pirc = ref('0')
	let places_address = ref()
	let places_name = ref()
	let places_image = ref()
	let list = ref([{
			tit: '4号馆',
			tiem: '21:00:00-21:30:00',
			piec: 175
		},
		{
			tit: '4号馆',
			tiem: '21:00:00-21:30:00',
			piec: 175
		},
	])
	let coupon = ref([])
	let bol = ref(false)
	let bol1 = ref(false)
	let bol2 = ref(false)
	let show1 = ref(false)
	let paytype = ref()
	const phoneRegex = /^1[3-9]\d{9}$/;
	const chanrel = () => {
		bol.value = !bol.value
	}
	const gotomz = () => {
		bol.value = true
		uni.navigateTo({
			url: '/pages/guide/guide'
		})
	}
	const confirm = (e) => {
		show.value = false
		console.log(e);
		sex.value = e.value[0].label
		six.value = e.value[0].id
	}
	const cancel = () => {
		show.value = false

	}
	const close = () => {
		show.value = false
	}
	const close3 = () => {
		bol2.value = false
	}
	const closeab = () => {
		bol2.value = false

	}
	const gototijiao = () => {
		if(phone.value==''){
			uni.showToast({
				title:'手机号不能为空',
				icon:'none'
			}) 
			return
		}
		if(!phoneRegex.test(phone.value)){
			uni.showToast({
				title:'请输入正确的手机号格式',
				icon:'none'
			}) 
			return
		}
		if (!name.value) {
			uni.$u.toast('名字不能为空')
			return
		}
		if (bol.value == false) {
			uni.showToast({
				title: '请同意协议',
				icon: 'none'
			})
		} else {
			bol1.value = true
		}
	}
	const gunb = () => {
		bol1.value = false
	}
	const yezf = () => {
		bol2.value = true
		paytype.value = 1

		bol1.value = false
	}
	const payment = () => {
		uni.requestSubscribeMessage({
			tmplIds: ['ropT_b9f-HPW6onEWhc5q2OTnx62V4aAbM8Xe3kyfP0'],
			success(res) {
				console.log(res);
				// 处理订阅成功后的逻辑
				ddtj()
			},
			fail(err) {
				console.log(err);
				// 处理订阅失败后的逻辑
			}
		})
		bol2.value = false
	}
	const wxzf = () => {
		paytype.value = -1
		uni.requestSubscribeMessage({
			tmplIds: ['ropT_b9f-HPW6onEWhc5q2OTnx62V4aAbM8Xe3kyfP0'],
			success(res) {
				console.log(res);
				// 处理订阅成功后的逻辑
				ddtj()
			},
			fail(err) {
				console.log(err);
				// 处理订阅失败后的逻辑
			}
		})
		// bol1.value=false
	}
	const ddtj = () => {
		// uni.requestSubscribeMessage({
		// 	tmplIds: ['ropT_b9f-HPW6onEWhc5q2OTnx62V4aAbM8Xe3kyfP0'],
		// 	success(res) {
		// 		console.log(res);
				// 处理订阅成功后的逻辑
				request.post('Price/createOrder', {
					data: {
						data: `type1|${type1.value},type2|${type2.value},price_id|${price_id.value},places_id|${places_id.value},start_time|${start_time.value},end_time|${end_time.value},number|1,coupon_id|${coupon_id.value},num|2,paytype|${paytype.value},realname|${name.value},mobile|${phone.value},sex|${six.value}`,
						times: times.value
					},
					header: {
						"token": token.value
					}
				}).then(res => {
					if (res.code == 1) {
						if (res.data.paytype == '-1') {
							wx.requestPayment({
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success: (res) => {
									console.log('支付成功');
									uni.showToast({
										title: '购买成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/order/order'
										})
									}, 1200)
								},
								fail: (res) => {
									console.log('取消支付');
								}
							})
						} else {
							uni.showToast({
								title: '购买成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/order/order'
								})
							}, 1200)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				
				}).catch(err => {
					console.log(err);
				})
		// 	},
		// 	fail(err) {
		// 		console.log(err);
		// 		// 处理订阅失败后的逻辑
		// 	}
		// })
	}

	const changeyhq = () => {
		show1.value = true
		request.post('Usercoupons/lists', {
			data: {
				type: '1, 2',
				status: '1'
			},
			header: {
				"token": token.value
			}
		}).then(res => {
			console.log(res);
			coupon.value = res.data
			console.log(coupon.value);
		}).catch(err => {
			console.log(err);
		})
	}
	const shiyong = (item) => {
		show1.value = false
		pirc.value = item.money
		coupon_id.value = item.id
	}
	const close1 = () => {
		show1.value = false
	}
	const close2 = () => {
		show2.value = false
	}
	const gotovip = () => {
		uni.navigateTo({
			url: '/pages/myvip/myvip'
		})
	}
</script>

<style scoped>
	.makbox {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
		padding-top: 30rpx;
	}

	.matit {
		width: 100%;
		height: 30rpx;
		color: #10c696;
		padding-left: 20rpx;
		font-size: 12px;
		border-left: 3px solid #10c696;
		margin-bottom: 30rpx;
	}

	.mainfo {
		width: 720rpx;
		height: fit-content;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		box-shadow: 0 0 17px -9px rgba(0, 0, 0, .3);
		box-sizing: border-box;
	}

	.naname {
		width: 650rpx;
		height: fit-content;
		margin: 0 auto;
		border-bottom: 1px solid #e5e5e5;
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		box-sizing: border-box;
	}

	.naname1 {
		width: 650rpx;
		height: 90rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.phone {
		margin-right: 70rpx;
	}

	.name {
		margin-right: 100rpx;
	}

	.six {
		margin-right: 100rpx;
	}

	.sixbox {
		display: flex;
		align-items: center;
		width: 480rpx;
		justify-content: space-between;
	}

	.maknav {
		width: 720rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		box-shadow: 0 0 17px -9px rgba(0, 0, 0, .3);
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	.navit {
		width: 650rpx;
		height: 115rpx;
		margin: 0 auto;
		border-bottom: 1px solid #e5e5e5;
		padding-top: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: flex-start;
	}

	.maktiem {
		width: 650rpx;
		/* height: 320rpx; */
		margin: 0 auto;
		padding-bottom: 30rpx;

		border-bottom: 1px solid #e5e5e5;
		box-sizing: border-box;
	}

	.makpic {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10rpx;

	}

	.tiemtit {
		margin-top: 28rpx;
		margin-bottom: 22rpx;
		display: flex;
		align-items: center;
	}

	.titli {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		font-size: 14px;
	}

	.titicon {
		display: flex;
	}

	.makvip {
		width: 650rpx;
		height: 90rpx;
		margin: 0 auto;
		border-bottom: 1px solid #e5e5e5;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.vipletf {
		width: 360rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px
	}

	.letfte {
		font-size: 13px;
		color: #757575;
	}

	.upvip {
		font-size: 15px;
		color: #10c696;
	}

	.favou {
		width: 650rpx;
		height: 90rpx;
		margin: 0 auto;
		border-bottom: 1px solid #e5e5e5;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fapric {
		display: flex;
		align-items: center;
		font-size: 15px;
	}

	.piecmak {
		width: 650rpx;
		height: 90rpx;
		margin: 0 auto;
		line-height: 90rpx;
		text-align: right;
		font-size: 14px;
	}

	.relief {
		margin-top: 60rpx;
		margin-left: 30rpx;
		padding-bottom: 150rpx;
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.rebxo {
		width: 30rpx;
		height: 30rpx;
		border: 1px solid #8c8c8c;
		margin-right: 5rpx;
		border-radius: 50%;
	}

	.relimg {
		width: 30rpx;
		height: 30rpx;
	}

	.makadd {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;

	}

	.addletf {
		width: 472rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		color: #10c696;
		background-color: #fff;
	}

	.butto {
		width: 280rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background-color: #10c696;
	}

	.popu {
		width: 100%;
		height: 500rpx;
		padding-top: 20rpx;
	}

	.poli {
		width: 710rpx;
		height: 210rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		box-shadow: 0 0 17px -9px rgba(0, 0, 0, .3);
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
	}

	.potit {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 14px;
	}

	.popimage {
		width: 180rpx;
		height: 140rpx;
	}

	.potiem {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 12px;
		margin-bottom: 10rpx;
	}

	.buttbox {
		display: flex;
		align-items: center;
	}

	.boxleft {
		width: 132rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #10c696;
		color: #fff;
		text-align: center;
		font-size: 13px;
		border-radius: 30rpx;
	}

	.boxri {
		width: 132rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #fff;
		color: #10c696;
		text-align: center;
		font-size: 13px;
		border-radius: 30rpx;
		margin-left: 30rpx;
		border: 1px solid #10c696;

	}

	.pobox {
		width: 600rpx;
		height: 800rpx;
		font-size: 14px;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.boxtit {
		width: 100%;
		text-align: center;
		height: 144rpx;
		line-height: 144rpx;
	}

	.guanbi {
		margin: 0 auto;
		margin-top: 206rpx;
		width: 360rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #10c696;
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
	}

	.zhifufs {
		width: 100%;
		height: 340rpx;
	}

	.zhifu {
		width: 100%;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
	}

	.qxzhifu {
		width: 100%;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
	}

	.pircpo {
		width: 610rpx;
		height: 430rpx;
	}

	.poptit {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 14px;
	}

	.pirctit {
		width: 100%;
		text-align: center;
		color: #5f5f5f;
		font-size: 12px;
	}

	.pircetit {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		font-weight: 500;
		font-size: 20px;
	}

	.myprice {
		width: 100%;
		text-align: center;
		font-size: 12px;
		margin-bottom: 30rpx;
	}

	.xuanz {
		height: 90rpx;
		width: 100%;
		border-top: 1px solid #e2e2e2;
		display: flex;
	}

	.qixiao {
		width: 300rpx;
		height: 90rpx;
		border-right: 1px solid #e2e2e2;
		line-height: 90rpx;
		text-align: center;
		color: #444444;
	}

	.zhifu11 {
		width: 300rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #10c696;
	}
</style>
<!-- 10c696 -->